<template>
    <div class="home-layout">
        <aside class="sidebar">
            <h3>后台管理系统</h3>
            <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" background-color="#2d3a4b"
                text-color="#fff" active-text-color="#1abc9c" @select="handleMenuSelect">
                <el-menu-item v-for="item in menuList" :key="item.index" :index="item.index">
                    <span>{{ item.title }}</span>
                </el-menu-item>
            </el-menu>
        </aside>
        <main class="main-content">
            <h1>首页</h1>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-card>
                        <UserManage v-if="activeMenu === '/home'" />
                        <RoleManage v-else-if="activeMenu === '/user'" />
                        <RoleManage v-else-if="activeMenu === '/role'" />
                        <ContentManage v-else-if="activeMenu === '/content'" />
                        <LoginPanel v-else-if="activeMenu === '/login'" />
                        <div v-else>请选择左侧菜单</div>
                    </el-card>
                </el-col>
            </el-row>
        </main>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import 'element-plus/dist/index.css'
import UserManage from '../components/UserManage.vue'
import RoleManage from '../components/RoleManage.vue'
import ContentManage from '../components/ContentManage.vue'
import LoginPanel from '../components/LoginPanel.vue'

const menuList = [
    { index: '/home', title: '首页' },
    { index: '/user', title: '用户管理' },
    { index: '/role', title: '角色管理' },
    { index: '/content', title: '内容管理' },
    { index: '/login', title: '登录' }
]

const activeMenu = ref(menuList[0].index)

function handleMenuSelect(index) {
    activeMenu.value = index
}
</script>

<style scoped>
.home-layout {
    display: flex;
    height: 100vh;
}

.sidebar {
    width: 200px;
    background: #2d3a4b;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
}

.main-content {
    flex: 1;
    padding: 40px;
    background: #ecf0f1;
}
</style>
